import React from 'react'
class Home extends React.Component {
  //1、构造方法
//   constructor中通常只做两件事情：
// 通过给 this.state 赋值对象来初始化内部的state；
// 为事件绑定实例（this）；
  constructor() {
    console.log('home-constructor')
    super()
    this.state = {
      content: '我是home',
    }
  }
  changeText() {
    console.log('111')
    this.setState({
      content: '我是张三',
    })
  }
  //2 执行render函数
  render() {
    console.log('home-render')
    const { content } = this.state
    return (
      <div>
        <div>{content}</div>
        <button onClick={(e) => this.changeText()}>按钮</button>
      </div>
    )
  }
  // 3、组件被渲染到DOM ：被挂载到DOM
//   componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
//依赖于DOM的操作可以在这里进行； 在此处发送网络请求就最好的地方；可以在此处添加一些订阅

  componentDidMount() {
    console.log('hoem-componentDidMount')
  }
  //4、组件的DOM被更新完成：DOM发生更新
  //componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法
  //componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法
  //如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；
  // （例如，当 props 未发生变化时，则不会执行网络请求）。
  componentDidUpdate() {
    console.log('home-componentDidUpdate')
  }
  //组件从DOM中卸载掉，从d'OM中移除
  //componentWillUnmount() 会在组件卸载及销毁之前直接调用。
  //在此方法中执行必要的清理操作；
  //除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等；

  componentWillUnmount() {
    console.log('hoem-componentWillUnmount')
  }
}
export default Home
